<template>
	<div class="login-wrap">
		<el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
			class="demo-ruleForm login-container">
			<h3 class="title">用户登录</h3>
			<el-form-item prop="username">
				<el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
			</el-form-item>
			<el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
			<el-form-item style="width:100%;">
				<el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" :loading="logining">登录
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script type="text/ecmascript-6">
	export default {
		name: 'login',
		data() {
			return {
				//定义loading默认为false
				logining: false,
				// 记住密码
				rememberpwd: false,
				ruleForm: {
					//username和password默认为空
					username: '',
					password: '',
					code: '',
					randomStr: '',
					codeimg: ''
				},
				//rules前端验证
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				}
			}
		},
		// 创建完毕状态(里面是操作)
		created() {
			// 获取存在本地的用户名密码
			this.getuserpwd()
			this.check_token()

		},
		// 里面的函数只有调用才会执行
		methods: {
			check_token() {
				this.$model.get("/auth/check_token").then(res => {
					if (res.data.data == true) {
						this.$router.push({
							path: '/home/index'
						}) //页面跳转
					}
				})
			},
			// 获取用户名密码
			getuserpwd() {
				this.ruleForm.username = localStorage.getItem('username');
				this.ruleForm.password = localStorage.getItem('password');
			},
			//登录
			submitForm() {
				let data = {
					username: this.ruleForm.username,
					password: this.ruleForm.password
				}
				this.$model.post("/auth/cms_login", data).then(res => {
					//code=200正常
					if (res.code == 200) {
						localStorage.setItem("token", res.data.token)
						this.$message({
							message: '登录成功',
							type: 'success'
						});
						this.$router.push({
							path: '/home/index'
						}) //页面跳转
					}
				})
			},
		}
	}
</script>

<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url();
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}

	.remember {
		margin: 0px 0px 35px 0px;
	}

	.code-box {
		text-align: right;
	}

	.codeimg {
		height: 40px;
	}
</style>
